<template>
  <view class="cost-page">
    <scroll-view scroll-y class="cost-content-page" :style="`width: 100%`">
      <u-card
        v-for="(item, index) in costInfo"
        :key="item.paymentId"
        :show-head="false"
      >
        <template #body>
          <view class="u-f-w-b u-font-xl u-main-color">
            {{ item.feeTypeLevel1Name }}
            <text v-if="item.feeTypeLevel2Name">
              /{{ item.feeTypeLevel2Name }}
            </text>
            <text v-if="item.feeTypeLevel3Name">
              /{{ item.feeTypeLevel3Name }}
            </text>
          </view>
          <view class="u-flex u-row-between u-m-b-20 u-m-t-20">
            <view class="label u-tips-color">备注：</view>
            <view class="u-content-color">{{ item.remark }}</view>
          </view>
          <u-line color="#ccc" />

          <view class="u-flex u-row-between u-m-t-20">
            <view class="label u-tips-color">金额(元)：</view>
            <view class="u-f-w-b u-font-xl u-main-color">{{
              item.amountShow
            }}</view>
          </view>
        </template>
      </u-card></scroll-view
    >
    <view class="u-flex u-row-between bottom-total">
      <view>合计：</view>
      <view class="u-f-w-b u-font-xl u-main-color">{{
        formatPrice(costTotal)
      }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getCostDetail } from '@/api/modules/finance';
import { formatPrice } from '@/utils/tools';
const props = defineProps<{
  paymentRegistId: any;
}>();
const { paymentRegistId } = toRefs(props);
const costInfo = ref<any>();
const costTotal = ref<any>();
const getInfo = async () => {
  let res: any = await getCostDetail({
    paymentRegistId: paymentRegistId.value,
  });
  costTotal.value = 0;
  res.forEach((item: any) => {
    item.amountShow = formatPrice(item.amount);
    costTotal.value += Number(item.amount);
  });
  costInfo.value = [...res];
};
getInfo();
</script>
<style lang="scss">
.cost-page {
  height: 100%;
  .cost-content-page {
    height: calc(100% - 100rpx);
    // overflow: auto;
  }
}
.bottom-total {
  background-color: #fff;
  padding: 20rpx;
  position: relative;
  bottom: -16rpx;
}
</style>
